<html>
    <head>
	<title>Cordia Test</title>
	<script src="jquery.js" type="text/javascript"></script>
	<script src="jquery.cookie.js" type="text/javascript"></script>
	<script src="jquery.cordia.js" type="text/javascript"></script>

	<script type="text/javascript">
	    $().ready(function() {
		$('#groupBInput').hide();
		$('#group').change(function() {
		    if ($('#group').val() == 'A') {
			$('#groupAInput').show();
			$('#groupBInput').hide();
		    } else {
			$('#groupAInput').hide();
			$('#groupBInput').show();
		    }
		});

		$('#textinput').monitor('forms', 'focus').monitor('blur', 'keydown');
		$('#checkboxinput').monitor('forms', 'change');
		$('#selectinput').monitor('forms', 'change');
		$('#clickmeimg').monitor('img', 'mousedown').monitor('img', 'mouseup').monitor('img', 'click')
		    .monitor('img', 'dblclick').monitor('img', 'mousedown').monitor('img', 'mouseup').monitor('img', 'mouseenter')
		    .monitor('img', 'mouseleave').monitor('img', 'mousemove').monitor('img', 'mouseover').monitor('img', 'mouseout');
		$('#receiveMailA').monitor('abtrials', 'change', {
		    getExtraData: function(e) {
			return {
			    group: 'A',
			};
		    }
		});
		
		$('#receiveMailB').monitor('abtrials', 'change', {
		    getExtraData: function(e) {
			return {
			    group: 'B',
			};
		    }
		});
	    });
	</script>
    </head>
    <body>
	<h1>Manual log events</h1>
	<ul>
	    <li><a href="javascript:$.Cordia.log('Link', '1 Clicked');">Link 1</a><br></li>
	    <li><a href="javascript:$.Cordia.log('Link', '2 Clicked');">Link 2</a></li>
	    <li><a href="javascript:$.Cordia.log('Link', '3 Clicked');">Link 3</a></li>
	</ul>

	<h1>Monitor events</h1>
	<form>
	    Focus Changed: <input id="textinput" type="text"><br>
	    Value Changed: <input id="checkboxinput" type="checkbox"><br>
	    Value Changed: <select id="selectinput">
		<option value="Value 1">1</option>
		<option value="Value 2">2</option>
		<option value="Value 3">3</option>
	    </select><br>
	    <img src="button_normal.png" id="clickmeimg" onmousedown="javascript:document.getElementById('clickmeimg').src='button_pressed.png';" onmouseup="javascript:document.getElementById('clickmeimg').src='button_normal.png';">
	</form>

	<h1>A-B trials</h1>
	<form>
	    Group: <select id="group">
		<option selected value="A">A</option>
		<option value="B">B</option>
	    </select>
	    <hr>
	    <form>
		<div id="groupAInput">
		    Received Mail: <input id="receiveMailA" type="checkbox">
		</div>
		<div id="groupBInput">
		    Receive Mail<br>
		    <select id="receiveMailB">
			<option value="yes">Yes</option>
			<option selected value="no">No</option>
		    </select>
		</div>
	    </form>

	<ul id="log">
	</ul>
    </body>
</html>
